{% extends "eventyay_common/base.html" %}
{% load i18n %}
{% load bootstrap3 %}
{% block title %}{{ _('Add a two-factor authentication device') }}{% endblock %}

{% block nav_top_header %}
    <a href="{% url 'eventyay_common:account' %}" class='dropdown-toggle'>
        <span class='fa-stack fa-lg'>
            <i class='fa fa-circle fa-stack-2x'></i>
            <i class='fa fa-user fa-stack-1x fa-inverse'></i>
        </span>
        <div class='context-indicator'>
            <span class='context-name'>{{ _('Account') }}</span>
        </div>
    </a>
{% endblock nav_top_header %}

{% block content %}
    <h1>{{ _('Add a two-factor authentication device') }}</h1>
    <p>
        {{ _('To set up this device, please follow the following steps:') }}
    </p>
    <ol class="multi-step-tutorial">
        <li>
            {{ _('Download the Google Authenticator application to your phone:') }}
            <ul>
                <li>
                    <a href='https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&'
                            target='_blank'>
                        {{ _('Android (Google Play)') }}
                    </a>
                </li>
                <li>
                    <a href="https://f-droid.org/repository/browse/?fdfilter=authenticator&fdid=com.google.android.apps.authenticator2"
                            target='_blank'>
                        {{ _('Android (F-Droid)') }}
                    </a>
                </li>
                <li>
                    <a href='https://itunes.apple.com/us/app/google-authenticator/id388497605?mt=8'>
                        {{ _('iOS (iTunes)') }}
                    </a>
                </li>
                <li>
                    <a href='https://m.google.com/authenticator'>
                        {{ _('Blackberry (Link via Google)') }}
                    </a>
                </li>
            </ul>
        </li>
        <li>
            {{ _('Add a new account to the app by scanning the following barcode:') }}
            <div class='qrcode-canvas' data-qrdata='#qrdata'></div>
            <p>
                <a data-toggle='collapse' href='#no_scan'>
                    {{ _("Can't scan the barcode?") }}
                </a>
            </p>
            <div class='collapse' id='no_scan'>
                <ol class="multi-step-tutorial">
                    <li>
                        {{ _('Use the "provide a key" option of your authenticator app.') }}
                    </li>
                    <li>
                        {{ _('In "Account name", type your login name for pretix.') }}
                    </li>
                    <li>
                        {{ _('In "Secret"/"Account Key", enter the following code:') }}
                        <div>
                            <code id='otp_secret' style='white-space: pre'>{{ secretGrouped }}</code>
                            <button type='button' class='btn btn-default btn-xs btn-clipboard' data-clipboard-target='#otp_secret'>
                                <span class='fa fa-clipboard' aria-hidden='true'></span>
                                {{ _('copy') }}
                            </button>
                        </div>
                        <div>
                            <small>Spaces don't matter.</small>
                        </div>
                    </li>
                <li>
                        {{ _('If present, make sure "Time-based"/"TOTP" and 6 digit codes are selected.') }}
                </li>
                </ol>
            </div>
        </li>
        <li>
            {{ _('Enter the displayed code here:') }}
            <form class='form form-inline' method='post' action=''>
                {% csrf_token %}
                <input type='number' name='token' class='form-control' required='required'>
                <button class='btn btn-primary' type='submit'>
                    {{ _('Continue') }}
                </button><br>
                <label>
                    <input type='checkbox' name='activate' checked='checked' value='on'>
                    {{ _('Require second factor for future logins') }}
                </label>
            </form>
        </li>
    </ol>

    <script type='text/json' id='qrdata'>
        {{ qrdata|safe }}


    </script>
{% endblock content %}
